<template>
  <div ref="chartRef" style="width: 60%; height: 400px;"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, watch, ref, nextTick } from 'vue';

const props = defineProps({
  chartOption: {
    type: Object,
    default: () => ({
      xAxisData: [],
      seriesData: [],
      yAxisName: '单位：元',
    })
  },
});

const chartRef = ref(null);
let chartInstance = null;

const axisColor = '#D9D9D9';
const axisColor2 = '#999999';
const itemStyleColor = '#91B0FF';

const renderChart = () => {
  console.log(props.chartOption);
  console.log('xAxisData:', props.chartOption.xAxisData);
  console.log('seriesData:', props.chartOption.seriesData);
  if (!chartInstance) return;
  const option = {
    title: {
      text: '销售额分布',
      left: 'center',
      top: '10',
      textStyle: {
        color: '#333333',
        fontWeight: 'bolder',
        fontSize: 14,
      },
    },
    grid: {
      left: '33',
      right: '30',
      top: '60',
      bottom: '5',
      containLabel: true,
    },
    legend: {
      bottom: 0,
      data: props.chartOption.legendData || [],
    },
    xAxis: {
      type: 'category',
      data: props.chartOption.xAxisData,
      axisLine: {
        lineStyle: {
          color: axisColor,
        },
      },
      axisTick: {
        show: true,
        lineStyle: {
          color: axisColor,
        },
      },
      axisLabel: {
        interval: 0,
        align: 'center',
        color: axisColor2,
        formatter: function (value) {
          return value.length > 3 ? value.substring(0, 3) + '\n...' : value;
        },
      },
    },
    yAxis: {
      type: 'value',
      name: props.chartOption.yAxisName,
      nameTextStyle: {
        color: axisColor2,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: axisColor2,
      },
      splitLine: {
        lineStyle: {
          color: axisColor,
        },
      },
    },
    series: [
      {
        type: 'bar',
        data: props.chartOption.seriesData,
        itemStyle: {
          color: itemStyleColor,
          barBorderRadius: [4, 4, 0, 0],
        },
        barWidth: 14,
        barGap: '100%',
      },
    ],
    tooltip: {
      formatter: '销售额：{c}<br />{b}',
      backgroundColor: '#FFFFFF',
      borderColor: '#eef3f8',
      borderWidth: 1,
      textStyle: {
        color: '#8C8C8C',
      },
      padding: 12,
    },
  };
  chartInstance.setOption(option, true);
};

onMounted(() => {
  nextTick(() => {
    chartInstance = echarts.init(chartRef.value);
    renderChart();
  });
});

watch(
  () => props.chartOption,
  () => {
    renderChart();
  },
  { deep: true }
);
</script>

<style lang="scss" scoped>
.chart {
  position: relative;
  display: inline-block;
  width: 50%;
  height: 100%;
}
.monitorContainer {
  width: 100%;
  height: 300px;

  & > div {
    &:first-child {
      width: 100% !important;

      & > canvas {
        width: 100% !important;
      }
    }
  }
}
.show {
  visibility: visible;
}

.hidden {
  visibility: hidden;
}
</style>
